<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
    <body>
        <!--
            事件的基本使用：
                1. 使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名
                2. 事件的回调需要配置在methods对象中，最终会在vm上
                3. methods中配置的函数，不要用箭头函数！否则this就不是vm了;
                4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
                5. @clieck="demo" 和 @clieck="demo($event)"效果一致，但后者可以传参
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <!--v-on点击事件-->
            <button v-on:click="showInfo1">点我提示信息(不传参)</button>
            <!--@是v-on的简写形式,点击事件-->
            <button @click="showInfo2(66)">点我提示信息(传参)</button>
        </div>
    </body>
    <script type="text/javascript">
        function showInfo() {
            alert('同学你好')
        }

        const vm = new Vue({
            el: '#root',
            data: {
                name: '尚硅谷'
            },
            methods: {
                showInfo1(event) {
                    console.log(event)
                    alert('同学你好')
                    console.log(this)
                },
                showInfo2(event,number) {
                    console.log(event,number)
                }
            }
        })
    </script>
</html>